<style lang="less" scoped>
    @import "../../assets/less/navigate.less";
</style>
<template>
    <div class="navigate">
        <Menu ref="navs" width="auto" :active-name="activeNavKey" @on-select="handleSelect">
            <Menu-item :name="menu.path" v-for="(menu, index) in menus" :key="index">
                <Icon :type="menu.icon"></Icon>
                {{menu.title}}
            </Menu-item>
        </Menu>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                activeNavKey: '',
                menus: []
            }
        },
        watch: {
            '$route': function() {
                this.$nextTick(() => {
                    this.initMenus()
                })
            }
        },
        methods: {
            initMenus(){
                this.menus = this.getNav().menus
                this.$nextTick(() => {
                    this.activeNavKey = this.$route.path
                })
            },
            handleSelect (path) {
                this.$nextTick(() => {
                    this.$router.push(path);
                })
            }
        },
        created () {
            this.initMenus()
        }
    }
</script>
